{% extends "base.html" %}
{% load staticfiles %}

{% block page_content %}
<section class="content-header" style="padding-top:0px" xmlns="http://www.w3.org/1999/html">
<div class="row">
    <div class="box box-info">
        <div class="box-header">
            <h4>
                {% if video.vdn_dataset %}
                    Push new annotations in <span style="font-weight:bold">{{ video.name }}</span> to remote VDN server
                {% else %}
                    Export & Push <span style="font-weight:bold">{{ video.name }}</span> with frames, annotations, and other information to remote VDN server
                {% endif %}
            </h4>
        </div>
    </div>
</div>
</section>
<section class="content">
    <div class="row">
        {% if not video.vdn_dataset %}
            <div class="col-lg-12">
            <div class="box box-primary">
            <div class="box box-header text-center">
                 <h3>Push dataset to VDN using an AWS S3 key / bucket</h3>
                 <p>If you intened to make it public, make sure that requester pay is enabled AND access policies are set correctly for the entire bucket. Provide AWS credential via environment variables or by running aws configure inside container or via IAM roles on EC2.</p>
            </div>
            <div class="box-body">
            <form method="post" id="push_form" action=".">
            <div class="row">
                <div class="col-sm-2"><div class="form-group"><label for="name">Name </label><input type="text" name="name" class="form-control" placeholder="Name" value="{{ video.name }}" /></div></div>
                <div class="col-sm-4"><div class="form-group"><label for="description">Description </label><textarea name="description" class="form-control" rows="1" placeholder="description of the dataset"></textarea></div></div>
                <div class="col-sm-2"><div class="form-group"><label for="bucket">S3 bucket </label><input name="bucket" type="text" placeholder="bucket" required="required" class="form-control" /></div></div>
                <div class="col-sm-2"><div class="form-group"><label for="key">S3 key </label><input name="key" type="text" placeholder="key_prefix" required="required" class="form-control" /></div></div>
                <div class="col-sm-2"><div class="form-group"><label for="region">S3 region </label><input name="region" type="text" placeholder="region" required="required" value="us-east-1" class="form-control" /></div></div>
            </div>
            {% for server in servers %}
            <div class="row">
                <div class="col-lg-4 col-md-4 col-sm-4 m-t text-center">
                <div class="form-group">
                        <label for="vdn_server">VDN Server</label>
                        <input type="text" class="form-control" name="vdn_server" value="{{ server.url }}" />
                </div>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-4 m-t text-center">
                    <div class="form-group">
                        <label for="password">Token <a target="_blank" href="{{ server.url }}/get_token/">(generate token here)</a></label>
                        <input type="text" class="form-control" name="token_{{ server.pk }}"  value="{{ server.last_token }}">
                        <input type="hidden" name="push_type" value="dataset">
                    </div>
                </div>
                {% csrf_token %}
                <div class="col-lg-4 col-md-4 col-sm-4">
                    <div class="form-group text-center">
                        <label for="submitbtn">Submit</label>
                        <button  class="btn btn-primary form-control" name="server_pk" value="{{ server.pk }}"  type="submit">Push to {{ server.url }}</button>
                    </div>
                </div>
            </div>
            {% endfor %}
            </form>
            </div>
            </div>
            </div>
        {% else %}
        <div class="col-lg-12">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h4>Pending Annotations</h4>
                </div>
                <div class="box-body">
                <form method="post" id="push_form" action=".">
                <div class="text-center">
                    <h4>Select / Deselect all annotations <input style="display:inline-block" name="selectall" class="checkbox" type="checkbox" id="select_all"></h4>
                </div>
                <table class="table dataTables">
                <thead>
                <tr>
                        <th class="text-center">type</th>
                        <th class="text-center">label</th>
                        <th class="text-center">size in pixels</th>
                        <th class="text-center">x</th>
                        <th class="text-center">y</th>
                        <th class="text-center">w</th>
                        <th class="text-center">h</th>
                        <th class="text-center">frame index</th>
                        <th class="text-center">metadata</th>
                        <th class="text-center">view</th>
                        <th class="text-center">select</th>
                </tr>
                </thead>
                <tbody>
                {% for d in annotations %}
                    <tr>
                        <td>annotation</td>
                        <td>{{ d.label }}</td>
                        <td class="text-right">{% widthratio d.h 1 d.w %}</td>
                        <td class="text-right">{{ d.x }}</td>
                        <td class="text-right">{{ d.y }}</td>
                        <td class="text-right">{{ d.w }}</td>
                        <td class="text-right">{{ d.h }}</td>
                        <td class="text-right">{{ d.frame_index }} </td>
                        <td class="text-center"> <a href="#" onclick="view_metadata({{ d.pk }})">view metadata</a></td>
                        <td class="text-center"><a href="/annotate_frame/{{ d.frame_id }}">view / delete</a></td>
                        <td class="text-center"><input type="checkbox"  name="annotation_{{ d.pk }}" checked="checked" class="checkbox select_annotation" /></td>
                    </tr>
                {% endfor %}
                </tbody>
                </table>
                    {% for server in servers %}
                    <div class="row">
                        <div class="col-lg-4 col-md-4 col-sm-4 m-t text-center">
                        <div class="form-group">
                                <label for="vdn_server">VDN Server</label>
                                <input type="text" class="form-control" name="vdn_server" value="{{ server.url }}" />
                        </div>
                        </div>
                        <div class="col-lg-4 col-md-4 col-sm-4 m-t text-center">
                            <div class="form-group">
                                <label for="password">Token <a target="_blank" href="{{ server.url }}/get_token/">(generate token here)</a></label>
                                <input type="text" class="form-control" name="token_{{ server.pk }}"  value="{{ server.last_token }}">
                                <input type="hidden" name="push_type" value="annotation">
                            </div>
                        </div>
                        {% csrf_token %}
                        <div class="col-lg-4 col-md-4 col-sm-4">
                            <div class="form-group text-center">
                                <label for="submitbtn">Submit</label>
                                <button  class="btn btn-primary form-control" name="server_pk" value="{{ server.pk }}"  type="submit">Push to {{ server.url }}</button>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </form>
                </div>
            </div>
        </div>
        {% endif %}
    </div>
    <div class="row">
    </div>
</section>
{% endblock %}
{% block page_js%}
<script>
    $(document).ready(function() {
        InitializeTables();
        $('#select_all').change(function () {$('.select_annotation').prop('checked', $('#select_all').prop('checked'));});




    })
</script>
{% endblock %}
